<template>
  <el-col v-if="auths.select" class="app-v-center app-column" style="overflow-y: auto">
    <el-row
      class="app-h-48px app-fill-width app-v-center pl-4 app-bb-1px-l2"
      style="background: #545c64"
      :gutter="10"
    >
      <el-button size="mini" :disabled="!auths.add" @click="toAddBusiness()">添加商家</el-button>
      <!-- <el-button
        size="mini"
      >删除</el-button> -->
    </el-row>
    <el-row class="app-h-48px app-fill-width app-v-center nav" :gutter="10">
      <div class="px-2">
        <el-input v-model="search.name" placeholder="请输入搜索内容" />
      </div>
      <div class="pr-2">
        <el-select v-model="search.typeId" placeholder="请选择商家类型">
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </div>
      <div class="pr-2">
        <el-cascader
          v-model="region1"
          :options="mapJson"
          :placeholder="search.city? `${search.province}/${search.city}`: search.province ? search.province : '请选择地区'"
          :props="{ value: 'name', label: 'name' }"
          @expand-change="addressChange"
          @change="addressChange"
        />
      </div>
      <div class="pr-2">
        <el-select v-model="search.status" placeholder="请选择商家品质">
          <el-option label="普通商家" :value="0" />
          <el-option label="优质商家" :value="1" />
        </el-select>
      </div>
      <div class="pr-2">
        <el-select v-model="search.userId" placeholder="请选择创建人">
          <el-option
            v-for="item in creatorList"
            :key="item.userId"
            :label="item.username"
            :value="item.userId"
          />
        </el-select>
      </div>
      <div class="pr-2">
        <el-button size="mini" type="info" @click="getBusinessList"> 搜索 </el-button>
      </div>
      <div class="pr-2">
        <el-button size="mini" type="primary" @click="resetSearch"> 重置 </el-button>
      </div>
    </el-row>
    <el-table
      border
      :data="businessList"
      class="app-flex-1"
      style="width: 100%; overflow-y: auto"
    >
      <el-table-column prop="id" align="center" label="ID" width="150" />
      <el-table-column
        prop="status"
        align="center"
        label="是否24小时"
        width="130"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.status" :disabled="!auths.update24" placeholder="请选择商家品质" @change="setBusinessStatus(scope.row)">
            <el-option label="否" :value="0" />
            <el-option label="是" :value="1" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="商家名称"
        width="150"
      />
      <el-table-column
        prop="mobile"
        align="center"
        label="商家电话"
        width="150"
      />
      <el-table-column
        prop="typeId"
        align="center"
        label="商家类型"
        width="120"
      >
        <template slot-scope="scope">
          <el-select disabled :value="scope.row.typeId">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="region" align="center" label="地区">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>{{
              scope.row.address ?
                scope.row.province +
                scope.row.city +
                scope.row.county +
                scope.row.address
                :scope.row.province +
                  scope.row.city +
                  scope.row.county
            }}</p>
            <div slot="reference" class="app-ellipsis">
              {{
                scope.row.address ?
                  scope.row.province +
                  scope.row.city +
                  scope.row.county +
                  scope.row.address
                  :scope.row.province +
                    scope.row.city +
                    scope.row.county
              }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="notes" align="center" label="备注">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>备注: {{ scope.row.notes }}</p>
            <div slot="reference" class="app-ellipsis">
              {{ scope.row.notes || '/' }}
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        align="center"
        label="创建人"
        width="70"
      />
      <el-table-column
        prop="createTime"
        align="center"
        label="添加时间"
        width="160"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.createTime.replace("T", " ") }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="200"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            :disabled="!auths.update"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            :disabled="!auths.delete"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="app-relative">
      <el-pagination
        class="mb-10 mt-5"
        background
        :current-page.sync="pageNo"
        :page-sizes="[10, 20, 50]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getBusinessList"
        @current-change="getBusinessList"
      />
    </div>
    <el-dialog
      :title="isEdit ? '添加用户' : '修改用户'"
      :visible.sync="addBusinessDialog"
      custom-class="app-height-70vh app-scroll-y"
      width="50vw"
    >
      <el-form
        ref="form"
        :rules="rules"
        class="app-width-80p"
        :model="form"
        label-width="160px"
      >
        <el-form-item prop="name" label="商家名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item prop="typeId" label="商家类型">
          <el-select v-model="form.typeId" placeholder="请选择商家类型">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="mobile" label="商家电话">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="地区">
          <el-cascader
            v-model="region"
            :options="mapJson"
            :props="{ value: 'name', label: 'name' }"
          />
        </el-form-item>
        <el-form-item prop="address" label="详细地址">
          <el-input v-model="form.address" />
        </el-form-item>
        <el-form-item prop="status" label="是否优质商家">
          <el-select v-model="form.status" placeholder="请选择">
            <el-option label="普通" :value="0" />
            <el-option label="优质" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item prop="notes" label="备注">
          <el-input v-model="form.notes" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addBusinessDialog = false">取 消</el-button>
        <el-button type="info" @click="addBusiness()">确 定</el-button>
      </div>
    </el-dialog>
  </el-col>
  <div v-else class="app-hv-center py-8 app-fill" style="color: grey">
    暂无权限查看
  </div>
</template>

<script>
import {
  getBusinessCreatorList,
  getBusinessList,
  updateBusiness,
  deleteBusinessById,
  addBusiness,
  getTypeList,
  setBusinessStatus
} from '@/api/business'
import { getMapJson } from '@/api/user'
import { mapState } from 'vuex'
export default {
  data: () => ({
    rules: {
      name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
    },
    isEdit: false,
    addBusinessDialog: false,
    businessList: [],
    pageNo: 1,
    pageSize: 20,
    total: 0,
    mapJson: [],
    creatorList: [],
    typeList: [],
    region: [],
    region1: [],
    form: {
      address: '',
      city: '',
      county: '',
      id: 0,
      mobile: '',
      name: '',
      notes: '',
      province: '',
      status: 0,
      typeId: 0
    },
    search: {
      mobile: '',
      name: '',
      status: void 0,
      userId: void 0,
      province: void 0,
      city: void 0,
      county: void 0
    },
    auths: {
      add: false,
      delete: false,
      update: false,
      select: false,
      update24: false
    }
  }),
  computed: {
    ...mapState('app',[
      'menuAndAuth'
    ])
  },
  mounted() {
    const menu = this.menuAndAuth.find(m => m.name === '商家管理')
    if (menu) {
      const listmenuauth = menu.children.find(lm => lm.name === '商家列表').children
      this.auths.add = listmenuauth.some(auth => auth.path === 'add')
      this.auths.delete = listmenuauth.some(auth => auth.path === 'delete')
      this.auths.update = listmenuauth.some(auth => auth.path === 'update')
      this.auths.select = listmenuauth.some(auth => auth.path === 'select')
      this.auths.update24 = listmenuauth.some(auth => auth.path === '24update')
    }

    if (this.auths.select) {
      // 地址信息
      getMapJson().then((res) => {
        if (res.code === 200) {
          this.mapJson = JSON.parse(res.data)
        }
      })
      // 类型列表
      getTypeList().then((res) => {
        if (res.code === 200) {
          this.typeList = res.data
        }
      })
      // 创建人列表
      getBusinessCreatorList().then((res) => {
        if (res.code === 200) {
          this.creatorList = res.data
        }
      })
      this.getBusinessList()
    } else {
      this.$message({ type: 'error',message: '您暂无权限查看此页面数据' })
    }
  },
  methods: {
    setBusinessStatus(item) {
      setBusinessStatus({ id: item.id }).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功！')
          this.getBusinessList()
        }
      })
    },
    resetSearch() {
      this.dates = []
      this.region1 = []
      this.search = {
        mobile: '',
        name: '',
        status: null,
        userId: '',
        typeId: void 0,
        province: void 0,
        city: void 0,
        county: void 0
      }
      this.getBusinessList()
    },
    addressChange(e) {
      this.search.province = e[0] || void 0
      this.search.city = e[1] || void 0
      if (e[2]) {
        this.search.county = e[2]
      } else {
        this.region1 = []
        this.search.county = void 0
      }
    },
    toAddBusiness() {
      this.form = {
        name: '',
        mobile: '',
        businessname: '',
        password: ''
      }
      this.region = []
      this.isEdit = false
      this.addBusinessDialog = true
    },
    getBusinessList() {
      if (!this.search.userId) {
        delete this.search.userId
      }
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        ...this.search
      }
      getBusinessList(params).then((res) => {
        if (res.code === 200) {
          this.businessList = res.data.dataList
          this.total = res.data.total
        }
      })
    },
    handleEdit(index, row) {
      this.isEdit = true
      this.form = row
      this.region = [this.form.province, this.form.city, this.form.county]
      this.addBusinessDialog = true
    },
    handleDelete(index, row) {
      this.$confirm(`确认删除商家${row.name}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteBusinessById({ id: row.id }).then((res) => {
            if (res.code === 200) {
              this.$message({ type: 'success', message: '已删除' })
              this.pageNo = 1
              this.getBusinessList()
            }
          })
        })
        .catch(() => {
          this.$message('已取消')
        })
    },
    addBusiness() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.province = this.region[0]
          this.form.city = this.region[1]
          this.form.county = this.region[2]
          if (this.isEdit) {
            updateBusiness(this.form).then((res) => {
              if (res.code === 200) {
                this.getBusinessList()
                this.$message({ type: 'success', message: '操作成功' })
                this.addBusinessDialog = false
              }
            })
          } else {
            addBusiness(this.form).then((res) => {
              if (res.code === 200) {
                this.pageNo = 1
                this.getBusinessList()
                this.$message({ type: 'success', message: '操作成功' })
                this.addBusinessDialog = false
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .inc input {
  color: red !important;
}
::v-deep .ded input {
  color: #a8bf8f !important;
}
::v-deep .el-table td, .el-table th {
  padding: 4px 0;
}
::v-deep .el-input__inner {
  height: 28px;
  line-height: 28px;
}
::v-deep .el-input__icon {
  height: 28px;
  line-height: 28px;
}
// ::v-deep .nav .el-input__inner {
//   height: 30px;
//   line-height: 30px;
// }
// ::v-deep .nav .el-input__icon {
//   height: 30px;
//   line-height: 30px;
// }
::v-deep .el-date-editor .el-range-separator {
    line-height: 22px;
}
</style>
